<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <ul class="list"> -->
            <!-- <li>
                IT互联网
                <ul>
                    <li>
                        编程语言
                        <ul>
                            <li>java</li>
                            <li>web</li>
                            <li>pthon</li>
                            <li>php</li>
                        </ul>
                    </li>
                    <li>前端开发</li>
                    <li>移动开发</li>
                    <li>游戏开发</li>
                </ul>
            </li>
            <li>
                设计创作
                
            </li>
            <li>升学考验</li>
            <li>职企考证</li> -->
        <!-- </ul> -->
    </div>
</body>

</html>
<script>
    /**
     * 
     *  1. 什么是递归?
     *      程序运行过程中,自身能够调用自身. 我们把这个称之为递归
     *  2. 使用递归时有没有什么需要注意的?
     *      至少要有一个结束条件,否则程序会一直调用,会报错,页面也会卡死
     * 
     *  3. 例子: 约会,你女朋友已经到了,你距离约定的地点还有100步,那么最后这100步你需要一步一步的走过去.  如何使用递归的方式走完100步
     * 
     *  4. 递归一般在什么场景下使用?
     *      在有很多层级结构,并且每个层级的结构都是大致相同的时候使用.   一般情况下,前后都有依赖关系的.
     * 
     *      递归的方式和普通函数函数调用的方式相比,  递归的效率更低
     * 
     *      所以,不要滥用递归.
     * 
     *  5. 通过递归求出1-100的和
     * 
    */


    // function walk(step){
    //     step--;

    //     if(step <= 0){
    //         console.log("你已经到达目的地")
    //     }else{
    //         console.log(`走了一步,还剩下${step}步`)
    //         walk(step)
    //     }

    // }

    // walk(100)

    // function resum(min,max){
    //     if(max == min){
    //         return min;
    //     }else{
    //         return max + resum(min, --max)
    //     }

    // }
    // // 1 + 2 + 3 + 4 + .... + 100
    // // 100 + 99 + 98 + .... 1

    // console.log(resum(1,100))


    let data = {
        menuList: [
            {
                name: "IT互联网",
                children: [
                    {
                        name: "编程语言",
                        children : [
                            {
                                name : "java",
                                children : [
                                    {
                                        name : "jsp",
                                        children : [
                                            {name : "123"},
                                            {name : "456"}
                                        ]
                                    }
                                ]
                            },
                            {
                                name : "python"
                            },
                            {
                                name : "web"
                            },
                            {
                                name : "php"
                            }
                        ]
                    },
                    {
                        name: "前端开发"
                    },
                    {
                        name: "移动开发",
                        children : [
                            {
                                name : "html5"
                            },
                            {
                                name : "andro"
                            },
                            {
                                name : "ios"
                            }
                        ]
                    },
                    {
                        name: "游戏开发"
                    }
                ]
            },
            {
                name: "设计创作",
                children: [
                    {
                        name: "平面设计"
                    },
                    {
                        name: "UI设计"
                    },
                    {
                        name: "软件设计"
                    }
                ]
            },
            {
                name: "升学考研",
                children: [
                    {
                        name: "考验"
                    },
                    {
                        name: "大学"
                    },
                    {
                        name: "高中"
                    },
                    {
                        name: "初中"
                    }
                ]
            },
            {
                name: "职企考证",
                children: [
                    {
                        name: "公务员"
                    }
                ]
            }
        ],
    }

    window.onload = function () {

        let app = document.querySelector("#app");

        
        console.log(createTree(data.menuList))
        app.innerHTML = createTree(data.menuList)
    }

    function createTree(data){
        let str = "<ul>";

        for(var i=0;i<data.length;i++){

            str += "<li>"+ data[i].name +"</li>"

            if(data[i].children && data[i].children.length > 0){

                str += createTree(data[i].children)

            }
        }

        str += "</ul>"
        
        return str
    }


























// for (var i = 0; i < data.menuList.length; i++) {  

        //     str = str + "<li>" + data.menuList[i].name + "</li>"

        //     if (data.menuList[i].children && data.menuList[i].children.length > 0) {

        //         str += "<ul>"

        //         for (var j = 0; j < data.menuList[i].children.length; j++) {

        //             str += "<li>" + data.menuList[i].children[j].name + "</li>"
                    
                    
        //             if(data.menuList[i].children[j].children && data.menuList[i].children[j].children.length > 0){
        //                 str += "<ul>"

        //                 for(var m = 0; m <data.menuList[i].children[j].children.length; m++){

        //                     str += "<li>" + data.menuList[i].children[j].children[m].name  +  "</li>"

        //                 }

        //                 str += "</ul>"
        //             }
        //         }

        //         str += "</ul>"
        //     }

        // }

        // list.innerHTML = str
</script>